<template>
    <div class="userbanner">
        <div class="userbanner-task">
            <ul class="userbanner-task-title">
                <li class="success">
                    <i><svg-icon name="checkbox-active" /></i>
                    <svg-icon name="user-dashboard-step" />
                    <span>Create a PODpartner account</span>
                </li>
                <li :class="{ active: isActive(0),success: isSuccess('is_sub') }" @click="ChangeStep(0)">
                    <i><svg-icon name="checkbox-active" /></i>
                    <svg-icon name="user-dashboard-step" />
                    <span>Verify your email address</span>
                </li>
                <li :class="{ active: isActive(1),success: isSuccess('first_template') }" @click="ChangeStep(1)">
                    <i><svg-icon name="checkbox-active" /></i>
                    <svg-icon name="user-dashboard-step" />
                    <span>Create a product template</span>
                </li>
                <li :class="{ active: isActive(2),success: isSuccess('first_sample') }" @click="ChangeStep(2)">
                    <i><svg-icon name="checkbox-active" /></i>
                    <svg-icon name="user-dashboard-step" />
                    <span>Make a sample order</span>
                </li>
                <li :class="{ active: isActive(3),success: isSuccess('first_store')  }" @click="ChangeStep(3)">
                    <i><svg-icon name="checkbox-active" /></i>
                    <svg-icon name="user-dashboard-step" />
                    <span>Connect your store</span>
                </li>
            </ul>
            <div :sort="activeStep" class="userbanner-task-explain">

                <div class="userbanner-task-content" v-if="activeStep < 4">

                    <h4>
                        <span v-text="explainData.title || ''"></span>
                        <UxToolTip placement="top" v-if="explainData.a_href">
                            <a slot="content" :href="explainData.a_href" @click.prevent="jumpTo(explainData.a_href)">{{ explainData.title }}</a>
                        </UxToolTip>
                    </h4>

                    <p v-text="explainData.content || ''"></p>
                    <span v-text="explainData.bottom_text || ''"></span>

                    <button v-if="activeStep != 0" v-loading="loading" type="primary" @click="buttonClick" v-text="explainData.btn_label || ''"></button>
                    <button v-else v-loading="loading" type="primary" @click="buttonClick" :class="{disable:email_late_time}" v-text="email_late_time ?'Resend in '+email_late_time :explainData.btn_label || ''"></button>
                </div>
                <div class="userbanner-task-content" v-else>
                    <h4><span v-text="explainData.title || ''"></span></h4>
                    <p v-text="explainData.content || ''"></p>
                    <p>Check it at your <nuxt-link to="/billing/discount">discount</nuxt-link>.</p>
                    <!-- <img src="@/assets/images/dashboard/dashboard-discount.png" style="max-width: 300px;" alt=""> -->
                </div>

                <figure v-if="activeStep == 0"><img src="@/assets/images/dashboard/dashboard-img1.png" alt=""></figure>
                <figure v-if="activeStep == 1"><img src="@/assets/images/dashboard/dashboard-img2.png" alt=""></figure>
                <figure v-if="activeStep == 2"><img src="@/assets/images/dashboard/dashboard-img3.png" alt=""></figure>
                <figure v-if="activeStep == 3"><img src="@/assets/images/dashboard/dashboard-img4.png" alt=""></figure>
                <figure v-if="activeStep == 100"><img src="@/assets/images/dashboard/dashboard-done.png" alt=""></figure>
            </div>

        </div>
        <!-- 样品订单 -->
        <OrderProductSelect class="maker-product" v-model="product_dialog" @selectDesign="insertDesign($event)" />
    </div>
</template>

<script>
const objKeys = ['is_sub', 'first_template', 'first_sample', 'first_store']
export default {
    name: "UserBanner",
    props: ["data", "userData"],
    data () {
        return {
            loading: false,
            activeStep: 100,
            timer: null,
            product_dialog: false,
            product_select: null,
            timeData: {
                h: "",
                m: "",
                s: "",
            },
            disabledDate: false,
            email_late_time: null,
        };
    },
    computed: {
        explainData () {
            let code = this.activeStep;
            let obj = {
                0: {
                    title: "Verify your email address ",
                    content: "We have sent you an email verification message. Please check your email inbox and confirm your email address so that you never miss any important notifications. If you do not see the message, please check your junk folder.",
                    btn_label: "Resend the message",
                    bottom_text: "",
                },
                1: {
                    title: "Create a product template",
                    content:
                        "Unleash your creativity and create one-of-a-kind apparel for your brand.",
                    btn_label: "Design Now",
                    a_label: "How to design a product?",
                    a_href: "/document/help-center?classify=3&detail=91",
                },
                2: {
                    title: "Make a sample order",
                    content:
                        "See how we realize your design vision and get a better idea of our apparel quality and tumaround time.",
                    btn_label: "Make an order",
                    a_label: "How to create a sample order?",
                    a_href: "/document/help-center?classify=6&detail=157",
                },
                3: {
                    title: "Connect your store",
                    content: "Quickly publish your stunning products to multiple e-commerce platforms without effort.",
                    btn_label: "Add store",
                    bottom_text: "Once you connect a store, you will get a 10% off coupon for your sample order.",
                    a_label: "Learn more about eCommerce integrations",
                    a_href: "/document/help-center?classify=2",
                },

                100: {
                    title: "Well done! ",
                    content: "You have been rewarded with a 10% off coupon valid for 7 days.",
                    btn_label: "",
                },

            }[code];
            return obj || {};
        },
        showDate () {
            return !(this.data || {}).first_sample || false;
        },
    },
    watch: {
        data: {
            handler: function (v) {
                this.setStep()
            },
        },
    },
    methods: {
        // 创建订单前查询模板
        async beforeMakeOrder () {
            let request = {
                page_num: 1,
                page_size: 1,
            };
            this.loading = true;
            let response = await this.$http("storeTemplate.getList", request);
            if (response.code === 0) {
                if (response.total > 0) {
                    this.product_dialog = true;
                } else {
                    //打开商品列表弹窗
                    this.$emit("global:productDialogOpen");
                }
                // 跳转
            } else {
                this.$uxMessage.error(response.msg || "error");
                // 提示
            }
            this.loading = false;
        },


        setStep () {
            let data = this.data || {};
            let list = [];
            let keys = objKeys;
            keys.map((item, index) => {
                if (!data[item]) {
                    list.push(index)
                }
            })
            if (!list.length > 0) {
                list.push(100)
            }
            var min = Math.min.apply(null, list);
            this.activeStep = min;
        },

        jumpTo (path) {
            this.$router.push(path);
        },
        isActive (n) {
            return this.activeStep == n ? "active" : "";
        },
        isSuccess (name) {
            let bol = (this.data || {})[name];
            return bol ? true : false;
        },
        ChangeStep (n) {
            let keys = objKeys;
            let key = keys[n];

            if (!this.isSuccess(key)) {
                this.activeStep = n;
            }

        },
        getShowTime () {
            var nowtime = parseInt(new Date().getTime() / 1000), //获取用户注册时间1647599451
                regtime = this.data.regist_time || 0,
                // regtime = 1647599451 - 86400 * 3,
                endtime = regtime + 86400 * 3; //定义结束时间 259200
            var lefttime = endtime - nowtime; //距离结束时间的毫秒数
            if (lefttime <= 0) {
                clearInterval(this.timer);
                this.timer = null;
                this.disabledDate = true;
                this.timeData.h = "00";
                this.timeData.m = "00";
                this.timeData.s = "00";
                return;
            } else {
                this.disabledDate = false;
            }
            var lefth = Math.floor(lefttime / (60 * 60)), //计算小时数
                leftm = Math.floor((lefttime / 60) % 60), //计算分钟数
                lefts = Math.floor(lefttime % 60); //计算秒数
            this.timeData.h = lefth;
            this.timeData.m = leftm;
            this.timeData.s = lefts;
            Object.keys(this.timeData).map((key) => {
                if (parseInt(this.timeData[key]) < 10) {
                    this.timeData[key] = "0" + this.timeData[key];
                }
            });
        },
        buttonClick () {
            if (this.loading) {
                return;
            }
            let active = this.activeStep;
            if (active == 1) {
                this.$emit("global:productDialogOpen");
            } else if (active == 2) {
                this.beforeMakeOrder();
                // this.product_dialog = true;
            } else if (active == 3) {
                this.$router.push("/user/store");
            } else if (active == 0) {
                this.sendEmail()
            }
        },
        async sendEmail () {


            if (this.loading || this.email_late_time) {
                // 加载中，或是未完成倒计时
            } else {
                this.loading = true
                let response = await this.$http('User.putEmailAgain')
                if (response.code == 0) {
                    window.localStorage.setItem('EMAIL_LATE_TIME', new Date().getTime())
                    this.email_late_time = '04:59'
                    this.timeCountDown()
                    this.$uxMessage.success('Mail sent successfully!')
                } else {
                    this.$uxMessage.warning(response.msg)
                }
                this.loading = false
            }
        },
        insertDesign (products) {
            this.$store.dispatch("order/init", {
                shop_id: 0,
                product: products
            });
            this.$router.push("/order/product");
        },
        timeCountDown () {
            let end = window.localStorage.getItem('EMAIL_LATE_TIME') || null;
            if (end) {
                end = parseInt(end) + 60 * 5 * 1000;
                this.timer = setInterval(() => {
                    let start = parseInt(new Date().getTime());
                    let diff = parseInt((end - start) / 1000);
                    if (diff > 0) {
                        let m = parseInt(diff / 60)
                        let s = parseInt(diff % 60)
                        m = m >= 10 ? m : '0' + m;
                        s = s >= 10 ? s : '0' + s;
                        this.email_late_time = `${m}:${s}`
                    } else {
                        this.email_late_time = null
                        window.localStorage.removeItem('EMAIL_LATE_TIME')
                        clearInterval(this.timer);
                        this.timer = null
                    }
                }, 1000);
            } else {
                clearInterval(this.timer);
                this.email_late_time = null
                this.timer = null
            }
        }
    },
    created () {
        if (process.client) {
            this.setStep()
            this.timeCountDown()
        }
    },
    beforeDestroy () {
        if (this.timer) {
            clearInterval(this.timer);
        }
    },
};
</script>

<style scoped lang="scss">
.userbanner {
}

.userbanner-task {
    display: flex;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e6e6e6;
    padding: 24px 32px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.userbanner-task-title {
    flex: 380;
    ul {
    }

    li {
        height: 48px;
        padding: 0 44px;
        border-radius: 8px;
        position: relative;
        display: flex;
        align-items: center;
        white-space: nowrap;
        color: #555555;
        cursor: pointer;

        & > span {
            font-size: 16px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
        }

        & > i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            line-height: 20px;
            background-color: #008552;
            opacity: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;

            & > svg {
                width: 10px;
                height: 10px;
                color: #fff;
            }
        }

        & > svg {
            position: absolute;
            left: 16px;
            top: 50%;
            margin-top: -9px;
            width: 18px;
            height: 18px;
            stroke: #9e9e9e;
        }

        &::after {
            display: none;
            content: '';
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            border-width: 4px 0 4px 5px;
            border-color: transparent transparent transparent #00794b;
            border-style: solid;
        }

        &:hover {
            background: #edf5f2;
        }

        &.success {
            color: #008552;
            cursor: default;
            &:hover {
                background: transparent;
            }

            span {
                text-decoration: line-through;
            }

            &.active {
                background: #edf5f2;
            }
            & > i {
                opacity: 1;
            }
            & > svg {
                display: none;
            }
        }

        &.active {
            background: #edf5f2;
            color: #008552;
            &::after {
                display: block;
            }
            & > svg {
                stroke: #008552;
            }
        }

        & + li {
            margin-top: 12px;

            &::before {
                content: '';
                position: absolute;
                left: 25px;
                top: -12px;
                height: 12px;
                width: 0;
                border-left: 1px dashed #ededed;
            }
        }
    }
}

.userbanner-task-explain {
    flex: 568;
    margin-left: 52px;
    margin-right: 16px;
    display: flex;

    & > figure {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 32px;
        img {
            width: 200px;
            height: 200px;
        }
    }

    .userbanner-task-content {
        padding: 12px 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        h4 {
            font-size: 16px;
            font-weight: 500;
            color: #000000;
            line-height: 16px;
            font-family: Roboto-Medium, Roboto;
            display: flex;
            align-items: center;

            strong {
                font-size: 32px;
                font-weight: 500;
            }

            svg {
                width: 14px;
                height: 14px;
                margin-left: 4px;
                color: rgb(172, 172, 172);
            }

            .tooltip {
                margin-left: 4px;

                a {
                    color: #fff !important;
                    text-decoration: underline;
                    &:hover {
                        // color: #ea4c89 !important;
                        text-decoration: none !important;
                    }
                }
            }
        }

        & > p {
            margin-top: 24px;
            margin-bottom: 12px;
            flex: 1;
            width: 100%;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #555;
            line-height: 22px;
            & > a {
                color: #087196;
                text-decoration: underline;
                &:hover {
                    color: #075e7d;
                    text-decoration: none;
                }
            }
        }

        & > span {
            font-size: 12px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #555;
            line-height: 16px;
            margin-bottom: 12px;
        }

        button {
            min-width: 120px;
            height: 36px;
            padding-left: 10px;
            padding-right: 10px;
            border-radius: 8px;
            font-size: 14px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
        }
    }

    &[sort='100'] {
        & > figure {
            margin-right: 28px;
            img {
                width: 220px;
                height: 220px;
            }
        }

        .userbanner-task-content {
            justify-content: center;
            h4 {
                height: 34px;
                font-size: 32px;
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                color: #000000;
                line-height: 34px;
            }
            p {
                flex: inherit;
                margin-top: 16px;
            }
            & > span {
                margin-top: 22px;
                a {
                    color: #087196;
                    text-decoration: underline;
                    cursor: pointer;
                    &:hover {
                        text-decoration: none;
                    }
                }
            }

            & > img {
                margin-top: 46px;
            }
        }
    }
}

// .userbanner-task-tip {
//     color: #fff;
//     text-decoration: underline;
//     &:hover {
//         color: #ea4c89;
//     }
// }

// .userbanner-task-explained {
//     position: relative;
//     flex: 1;
//     min-width: 420px;
//     box-sizing: border-box;
//     background: #ededed;
//     height: 100%;
//     display: flex;
//     flex-direction: column;
//     align-items: center;
//     justify-content: flex-end;
//     padding: 174px 78px 60px;
//     border-radius: 6px;

//     &::before {
//         content: '';
//         position: absolute;
//         width: 128px;
//         height: 100px;
//         left: 50%;
//         top: 76px;
//         transform: translate(-50%);
//         background-image: url('https://img.podpartner.com/static/images-20230202/user-banner-end.png');
//         background-repeat: no-repeat;
//         background-size: 128px, 100px;
//         background-position: center;
//     }

//     > h4 {
//         font-size: 16px;
//         color: #000000;
//         line-height: 16px;
//         margin-bottom: 4px;
//     }
//     > p {
//         text-align: center;
//         word-break: break-word;
//         font-size: 14px;

//         color: #000000;
//         line-height: 20px;
//     }
// }
</style>
